<!-- Copyright 2010 John L. Reilly

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>FirstResponder</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var deptLayer =  null;
var map;
var marker;

function initialize() {
  var myLatlng = new google.maps.LatLng(37,-95);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  }  

  var timestamp = new Date().getTime();
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
     placeMarker(event.latLng);
  });
}


function placeMarker(location) {
  if (marker) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
        position: location, 
        map: map,
        draggable: true
    });
    google.maps.event.addListener(marker, 'position_changed', showPosition);
    showPosition();
  }
}


function showPosition() {
  document.getElementById("latitude").innerHTML  = marker.getPosition().lat();
  document.getElementById("longitude").innerHTML = marker.getPosition().lng(); 
  document.getElementById("lat").value = marker.getPosition().lat();
  document.getElementById("lng").value = marker.getPosition().lng(); 
}

</script>

<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {
    alert(alerttxt);return false;
    }
  else
    {
    return true;
    }
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(shortName,"You must enter a Short Name.")==false)
  {shortName.focus();return false;}
  if (validate_required(longName,"You must enter a Long Name.")==false)
  {longName.focus();return false;}
  if (validate_required(fromEmail,"You must enter an Email from which alerts are received.")==false)
  {fromEmail.focus();return false;}
  if (validate_required(distGroupA,"You must enter a value for Response Range 1.")==false)
  {distGroupA.focus();return false;}
  if (validate_required(distGroupB,"You must enter a value for Response Range 2.")==false)
  {distGroupB.focus();return false;}
  if (validate_required(distGroupC,"You must enter a value for Response Range 3.")==false)
  {distGroupC.focus();return false;}
  if (validate_required(dispatchId,"You must enter a value for Dispatch ID.")==false)
  {dispatchId.focus();return false;}
  }
  }
  
}
</script>


<!--META-->
<meta http-equiv="content-type"  content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width" />

<!--STYLESHEET-->
<link rel="stylesheet" type="text/css" href="stylesheets/static.css" />
</head>

<body onload="initialize()">

<!--FIXED HEADERS-->
<div class="headwrap">
<div class="hBlack">
<div class="headerLeftTop">FirstResponder</div>
<div class="headerRightTop">ver 0.9</div>
<div class="headerLeftBottom">Department: Create</div>
<div class="headerRightBottom">12:34 PM</div>
</div>
<div class="hGray">
  <a class="buttonGrayHdr" href="mainMenu.html">Main</a>
  <a class="buttonGrayHdr" href="commandMenu.html">Command</a>
  <a class="buttonGrayHdr gSelected" href="department?action=display">Admin</a>
</div>
<div class="headerMist"></div>
</div>

<div class="outwrap">
<div class="headerPlug"></div>

<!--BUTTONS-->
<div id="centeredButtons"><ul><li>
<a class="button blue narrow tall first last"
   href="department?action=display">Cancel</a>
   </li><li>
<a class="button green narrow tall first last" 
   href="#" onclick="javascript:document.forms[0].submit();return false;">Save</a>
</li></ul></div>

<form method="get" onsubmit="return validate_form(this)" action="department?action=create">
<input type="hidden" name="action" value="create" />
<input type="hidden" id="lat" name="markerLat"></input>
<input type="hidden" id="lng" name="markerLng"></input>
  
<div class="row" style="min-width: 250px">
Short Name (required):</div>
<div><input class="inputfield" "type="input" name="shortName" /></div>
<div class="row" style="min-width: 250px">
Long Name (required):</div>
<div><input class="inputfield"  type="input" name="longName" /></div>
<div class="row" style="min-width: 250px">
From Email (required):</div>
<div><input class="inputfield" type="input" name="fromEmail" /></div>
<div class="row" style="min-width: 250px">
Response Range 1 (mins):</div>
<div><input class="inputfield" type="input" name="distGroupA" /></div>
<div class="row" style="min-width: 250px">
Response Range 2 (mins):</div>
<div><input class="inputfield" type="input" name="distGroupB" /></div>
<div class="row" style="min-width: 250px">
Response Range 3 (mins):</div>
<div><input class="inputfield" type="input" name="distGroupC" /></div>
<div class="row" style="min-width: 250px">
GPS Expiration (Minutes):</div>
<div><input class="inputfield" type="input" name="distMaxAge" /></div>
<div class="row" style="min-width: 250px">
Dispatch Id (required):</div>
<div><input class="inputfield" type="input" name="dispatchId" /></div>
<div class="row" style="min-width: 250px">
Mutual Aid Depts:</div>
<div><input class="inputfield" type="input" name="mutualAid" /></div>
<div class="row" style="min-width: 250px">
Dept Latitude:</div>
<div id="latitude" class="row" style="clear: none; width: 40%; overflow: hidden"></div>
<div class="row" style="min-width: 250px">
Dept Longitude:</div>
<div id="longitude" class="row" style="clear: none; width: 40%; overflow: hidden"></div>
<div class="sub white">
<div class="row" style="min-width: 250px">
Tracking Enabled:</div>
<div class="radioContainer">
<input class="radioButton" type="radio" name="trackingFlag" value="yes"/>Yes</input>
<input class="radioButton" type="radio" name="trackingFlag" value="no"/>No</input>
</div>
<div class="sub black">Set Department Position:</div> 
<div class="mapWrapper" style="width: 100%; padding: 10px;">
<div style="height: 400px; width: 100%; clear:left; float: left" id="map_canvas"></div>
</div>

  <div class="row" style="min-width: 250px">
  Username:</div>
  <div><input class="inputfield" type="input" name="username" /></div>
  <div class="row" style="min-width: 250px">
  Password:</div>
  <div><input class="inputfield" type="input" name="password" /></div>
  <div class="row" style="min-width: 250px">
  Type (required):</div>
  <div><input class="inputfield" type="input" name="type" /></div>
  <div class="row" style="min-width: 250px">
  Inbound VRU1:</div>
  <div><input class="inputfield" type="input" name="inboundVRU1" /></div>
  <div class="row" style="min-width: 250px">
  Inbound VRU2:</div>
  <div><input class="inputfield" type="input" name="inboundVRU2" /></div>
  <div class="row" style="min-width: 250px">
  Inbound VRU3:</div>
  <div><input class="inputfield" type="input" name="inboundVRU3" /></div>

</form>

<!--BUTTONS-->
<div id="centeredButtons"><ul><li>
<a class="button blue narrow tall first last"
   href="department?action=display">Cancel</a></li><li>
<a class="button green narrow tall first last"
   href="#" onclick="javascript:document.forms[0].submit();return false;">Save</a>
</li></ul></div>

<!--FOOTER-->
<div class="footer">FirstResponder</div>

<!--OUTLINE WRAPPER -->
</div> 

</body>
</html>
